<template>
  <div style="width: 1000px;">
    <el-row :gutter="10" style="width: 100%;">
      <el-col :span="16">
        <div style="background-color: white;height: 100%;">
          <div class="setup">
            <h3 style="color: black;margin: 0 0 10px 0">屏蔽</h3>
            <span style="font-size: 14px">用户黑名单/话题黑名单/不看他的动态</span>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="20">
                <h4 style="color: black;margin: 0 0 10px 0">设置屏蔽关键词</h4>
                <span>
                  盐选会员专属功能，「推荐页」将屏蔽包含关键词的内容
                </span>
              </el-col>
              <el-col :span="4">
                <p style="display: inline-block; margin-top: 30px;color: #ce994f;">开通会员 ></p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">用户黑名单</h4>
                <span>
                  查看或撤销已屏蔽用户
                </span>
                <p class="user">
                  无用户
                </p>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">瓦力黑名单</h4>
                <span>
                  查看或撤销已屏蔽用户
                </span>
                <p class="user">
                  无用户
                </p>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">话题黑名单</h4>
                <span>
                  查看或撤销已屏蔽用户
                </span>
                <p class="user">
                  无用户
                </p>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>

          <div class="setup">
            <el-row :gutter="20">
              <el-col :span="22">
                <h4 style="color: black;margin: 0 0 10px 0">不看他的动态</h4>
                <span>
                  屏蔽已关注用户的动态
                </span>
                <p class="user">
                  无用户
                </p>
              </el-col>
              <el-col :span="2">
                <p style="line-height: 50px">编辑</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="border: 1px solid #e9e9eb;background-color: white">
          <div style="height: 100%;padding: 20px">
            <h3 style="color: black;margin: 0 0 10px 0">常见问题</h3>
            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">屏蔽</p>
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="1.屏蔽用户后会发生什么？" name="1">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;屏蔽后，对方将不能关注你，向你发私信，评论你的实名回答，使用「@」提及你，邀请你回答问题等，但仍然可以查看你的公开信息。
                </div>
              </el-collapse-item>

              <el-collapse-item title="2.屏蔽话题后会发生什么？" name="2">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;屏蔽后，在首页的动态中将不会出现该话题下的内容。
                </div>
              </el-collapse-item>

              <el-collapse-item title="3.什么是「受限话题」？" name="3">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;受限话题」是一类特殊的话题，该类话题不利于普通用户。该类话题下的内容将不会进入知乎发现、每周精选、
                  知乎阅读等公共内容列表，不会在受限话题的父话题页面显示，也不会出现在用户个人首页动态中。 <span class="question">了解更多</span>
                </div>
              </el-collapse-item>

              <el-collapse-item title="4.什么是「限制名单」？" name="4">
                <div>
                  &nbsp;&nbsp;&nbsp;&nbsp;限制名单」是在保证用户社交关系下，选择不看某些用户的内容所推出的功能。<br>
                  &nbsp;&nbsp;&nbsp;&nbsp;将某个用户加入「限制名单」后，对方的动态将不会出现在首页「关注」和想法中，但不影响你们的关注关系，也可以正常发送私信，评论，邀请回答等。
                </div>
              </el-collapse-item>
            </el-collapse>
            <p style="font-weight: bold;font-size: 15px;color: black;margin: 20px 0 10px 0">其他问题</p>
            <p class="question">5.网站出现了问题？<span style="color: #1989fa">问题反馈</span></p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "HideView"
}
</script>

<style scoped>
.setup{
  height: 80px;
  border-bottom: 1px solid #e9e9eb;
  padding: 20px 18px;

}
.question{
  font-size: 15px;margin: 20px 0 0 0;
  color: #8493a5;
  cursor: pointer;
  font-size: 13px;
}
.question:hover{
  color: #056DE8;
}
p{
  color: #056DE8;
  cursor: pointer;
}
.user{
  padding-left: 25px;
  color: #8493a5;
}
span{
  font-size: 14px;
}
</style>